<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login bilibili []~(￣▽￣)~*</title>
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="bookmark" href="../images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="../css/loaderComponent.css">
    <link rel="stylesheet" type="text/css" href="/webjars/font-awesome/5.13.0/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="../css/login.css">
</head>
<body>
    <!--loader页面加载动画 iframe的src需要写html/不然项目启动后寻址不到-->
    <iframe id="loader" src="../html/loader.html"></iframe>
    <div class="loginBox">
        <img class="user" src="../images/user-icon.png" height="100px" width="100px" alt="UserIcon">
        <h3 class="signTitle">Sign in here</h3>
        <div id="loginMessageInputBox" th:if="${message}">
            <span id="loginMessage" th:attr="data-message=${message}">[[${message}]]</span>
            <span>
                <i class="fa fa-times" id="messageBoxCloseButton"></i>
            </span>
        </div>
        <form method="post" id="loginForm" action="/login">
            <div class="inputBox">
                <input type="text" name="username" id="username" placeholder="username" autofocus="autofocus">
                <span>
                    <i class="fa fa-user" aria-hidden="true"></i>
                </span>
            </div>
            <div class="inputBox">
                <input type="password" name="password" id="password" placeholder="password">
                <span>
                    <i class="fa fa-lock" aria-hidden="true"></i>
                </span>
            </div>
            <input type="submit" name="" id="submit_btn" value="login">
        </form>
        <a href="../html/logon.html">Register</a>
        <a href="#">Forget Password</a>
    </div>
    <script type="text/javascript" src="/webjars/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="/webjars/layer/src/layer.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/login.js"></script>
</body>
</html>